<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-10-19 10:36:24
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="currentMeter">
    <!-- <nu-col :span="24" style="height:calc(130px - 20px);">
                <nutbTitle title="当前电量"></nutbTitle> -->
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="计量点名称" prop="meterName" width="auto">
        <!-- <el-autocomplete v-model="formData.meterName" :fetch-suggestions="querySearchAsync" placeholder="请输入计量点名称"
          @select="handleSelect"></el-autocomplete> -->
        <el-select v-model="formData.meterName" filterable placeholder="请输入计量点名称">
          <el-option v-for="item in restaurants" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </NuformItem>
      <NuformItem label="电度量名称" prop="pointName" width="auto">
        <nu-input type="text" v-model="formData.pointName" size="middle" placeholder="请输入电度量名称"></nu-input>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
      </div>
    </NuVerifyForm>
    <div class="line"></div>
    <div style="height: 35px; position: relative; padding: 0 10px" class="renovateTime">
      <nu-button class="searchButton" @click="exportTable">导出</nu-button>
      <span class="warning_span">当前电量值为表底值（单位:MWH/MVarH）</span>
    </div>
    <!-- </nu-col> -->
    <!-- <nu-col :span="24" style="height: calc(100% - 130px - 20px);">
                <nutbTitle title="点表列表"></nutbTitle> -->
    <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options" border
      :pagination="pagination" @handleSizeChange="handleSizeChange" @handleChangePage="handleChangePage">
    </NuTableList>
    <!-- </nu-col> -->
  </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import { getToken } from "@/utils/auth";
export default {
  name: "currentMeter",
  components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList },
  data() {
    return {
      formData: {
        pointName: '',
        meterName: '',
      },
      fyButtons: [],
      pagination: {
        pageSize: 20,
        total: 0,
        pageNum: 1,
      },
      columns: [
        {
          label: '序号',
          prop: 'ranking',
          width: '70px',
          render: (h, params) => {
            return h('span', params.index + 1 + (this.pagination.pageNum - 1) * this.pagination.pageSize);
          },
        },
        {
          label: '计量点名称',
          prop: 'pointName',
        },
        {
          label: '电度量名称',
          prop: 'mesaName',
        },
        {
          label: '当前表码',
          prop: 'curTimeCode',
        },
        {
          label: '当前15分钟电量',
          prop: 'curTimeCol',
        },
        {
          label: '刷新时间',
          prop: 'dataTime',
        }
      ],
      dataSource: [],
      options: {
        'default-expand-all': true,
        'element-loading-background': 'rgba(225,239,242)',
        'element-loading-text': '数据正在加载中',
        'row-key': 'pid',
        'header-cell-style': {
          background: 'rgba(105, 159, 209, 0.7)',
          color: '#fff',
          fontWeight: 'bold',
          fontsize: '16px',
        },
        height: 'calc(100vh - 310px)',
        props: {
          fixed: 'right'
        }
      },
      restaurants: []
    };
  },
  created() { },
  mounted() {

    this.loadAll();
  },
  methods: {
    /**
     * 查询
     */
    searchTable() {
      this.$refs["formData"].searchForm("form");
    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getCurrentMeterData();
      }
    },
    /**
     * 类型change事件
     */
    typrChange() { },
    /**
     * 召唤
     */
    callBtn() { },
    /**
     * 清除数据
     */
    clearParams() {
      this.resetForm("formData");
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm("form");
      for (let k in this[formName]) {
        if (
          Object.prototype.toString.call(this[formName][k]) == "[object String]"
        ) {
          this[formName][k] = "";
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Array]"
        ) {
          this[formName][k] = [];
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Number]"
        ) {
          this[formName][k] = "";
        }
      }
    },
    /**
     * 返回输入建议的方法
     * @param {*} queryString
     * @param {*} cb
     */
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    /**
     * 过滤数据
     * @param {*} queryString
     */
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    /**
     * 点击选中建议项时触发
     * @param {*} item
     */
    handleSelect(item) {
      console.log(item);
    },
    // 远程搜索数据
    async loadAll() {
      let postData = {
        pageSize: 10000,
        page: 1,
      };
      let data = await this.$httpGet(window.api.getMesaNames, postData).then(
        (res) => {
          if (res.code == 200) {
            return res.mesaNames;
          }
        }
      );
      data = await data.map((item) => {
        return { value: item };
      });
      this.restaurants = data;
      // this.formData.meterName = data?.[0]?.value
      this.getCurrentMeterData();
    },
    /**
     * 导出
     */
    exportTable() {
      let postData = {
        ...this.formData
      };
      this.getDownload(
        window.api.currentElectricExportFile,
        {
          ...postData,
        },
        `当前电量.xlsx`
      );
    },
    /**
     * 每页条数变化事件
     */
    handleSizeChange(val) {
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getCurrentMeterData();
    },
    /**
     * 改变分页触发事件
     */
    handleChangePage(val) {
      this.pagination.pageNum = val;
      this.pagination.currentPage = val;
      this.getCurrentMeterData();
    },
    /**
     * 获取表格数据
     */
    getCurrentMeterData() {
      let postData = {
        ...this.formData,
        ...this.pagination,
      };
      for (let k in postData.query) {
        if (
          postData.query[k] &&
          Object.prototype.toString.call(postData.query[k]) == "[object String]"
        ) {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.dataSource = [];
      this.$httpGet(window.api.getCurrentMeter, postData)
        .then((res) => {
          if (res.code == 200) {
            this.pagination.total = res.total;
            this.dataSource = res.rows;
          } else {
          }
        })
        .catch((err) => { });
    },
  },
};
</script>
    
<style scoped lang="scss">
.currentMeter {
  height: 100%;
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  // align-items: center;
  position: relative;
  flex-wrap: wrap;
  padding-right: 160px;
}

.submitForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btnBox {
  display: flex;
  float: right;
  z-index: 10;
  position: absolute;
  // top: 15px;
  right: 10px;
  margin: 10px 0 0 0;
}

.dialogHeaderSearch {
  background-color: var(--model-bgc);
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
}

::v-deep .el-upload {
  width: 100%;

  .el-upload-dragger {
    width: auto;
  }
}
.warning_span {
  font-size: 13px;
  // font-weight: 600;
  color: #F44336;
  margin: 0 10px;
  vertical-align: middle;
}
</style>
    
    